import Taro, {Component, Config} from "@tarojs/taro";
import {View,Image} from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime} from '../../utils/common'

import './index.less'
import './my_profit.less'
import right_blue from "../../assets/img/right_blue.png";
import bg_17 from "../../assets/img/bg_17.jpg";

//我的收益
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer

class MyProfit extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    log: {},
    userInfo: getRuntime().getUserInfo()
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的收益' })
    this.getUserBenifitsStatistics()
  }

  config: Config = {
    navigationBarTitleText: '我的收益'
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  nowCash() {
    if(this.state.userInfo.commision<=0){ getRuntime().showToast('余额不足~'); return }
    getRuntime().navigateTo('/pages/user/cash_now')
  }

  getUserBenifitsStatistics() {
    let { userStore } = this.props.stores
    userStore.getUserBenifitsStatistics({
      callback: res => {
        this.setState({ log: res })
      }
    })
  }

  render() {
    let { userInfo,log } = this.state
    return (
      <View className='my-my_profit_index'>
        <Image src={bg_17} className='my-bg' />

        <View className='info'>
          <View className='list-info'>当前收益(元)</View>
          <View className='money'>{userInfo.commision}</View>
          <View className='btn-cash' onClick={this.nowCash.bind(this)}>立即提现</View>
        </View>

        <View className='my-from'>
          <View className='item-group'>
            <View className='line'>
              <View className='list-title'>今日收益</View>
              <View className='list-desc list-desc-active'>{log.todayBenifits}</View>
            </View>

            <View className='line'>
              <View className='list-title'>昨日收益</View>
              <View className='list-desc'>{log.yesterdayBenifits}</View>
            </View>

            <View className='line'>
              <View className='list-title'>累计收益</View>
              <View className='list-desc'>{userInfo.commision}</View>
            </View>
          </View>
        </View>

        <View className='btn-show' onClick={this.handelRouter.bind(this, '/pages/user/my_profit_list')}>
          <View>查看明细</View>
          <Image src={right_blue} className='icon-drop-down' />
        </View>

      </View>
    )
  }
}

export default MyProfit
